<template>
    <div>
        <!-- 通过邮箱找回密码 -->
        <div class="input-group">
            <van-field 
                @blur.native.capture="checkEmail"
                @focus.native.capture="clearEmailError" 
                v-model="email" 
                label="邮箱" 
                :error-message="emailMsg" 
                placeholder="请输入要找回密码的邮箱" 
            />
            <van-field 
                type="password"
                @focus.native.capture="clearPwdError"
                @input.native.capture="showEfficiency"
                v-model="pwd" 
                label="新密码" 
                @blur.native.capture="checkpwd"
                :error-message="pwdMsg" 
                placeholder="请输入新密码" 
            />
            <div class="pwd" ref="kuang" :class="{ inp: pwd }">
                <div>{{ w_or_s1 }}</div>
                <div>{{ w_or_s2 }}</div>
                <div>{{ w_or_s3 }}</div>
            </div>
            <van-field 
                @blur.native.capture='checkRepwd'
                type="password"
                @focus.native.capture="clearRepwdError"
                v-model="repwd"
                 label="确认密码" 
                 :error-message="repwdMsg" 
                 placeholder="请再次输入新密码" 
            />
        </div>
        <div class="btns">
            <div @click="update">确认修改</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                email: '',
                pwd:'',
                repwd:'',
                emailMsg:'',
                pwdMsg:'',
                repwdMsg:'',
                w_or_s1: "",
                w_or_s2: "",
                w_or_s3: "",
                result:'' //存放验证邮箱结果
            }
        },
        methods:{
            // 验证
            reqCall(url,params,callback){
                const urls=url+params
                this.axios.get(urls)
                .then(res=>callback(res.data))
            },
            // 验证邮箱
            checkEmail(){
                if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email)){
                    this.emailMsg='邮箱格式不正确'
                    return false
                }
                const url='api/users/checkEmail?email='
                this.reqCall(url,this.email,result=>{
                    if(result){
                        // 邮箱不存在，未注册
                        if(result.code==200){
                            this.emailMsg='该邮箱未注册'
                        }else{
                            this.emailMsg=''
                        }
                    }
                })
            },
            // 验证密码
            checkpwd(){
                 if (!/[\w\s\`\~\!\#\$\%\^\&\*\(\)\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/.test(this.pwd)) {
                    this.pwdMsg = "密码应为英文字符以及阿拉伯数字";
                    return false;
                } else if (this.pwd.length < 6 || this.pwd.length > 12) {
                    this.pwdMsg = "密码长度应为6-12位";
                    return false;
                } else {
                    this.pwdMsg = "";
                    return true;
                }
            },
            // 验证确认密码
            checkRepwd(){
                // 非空
                if(!this.repwd){
                    this.repwdMsg='密码不能为空'
                    return false
                }
                if(this.pwd==this.repwd){
                    this.repwdMsg=''
                    return true
                }else{
                    this.repwdMsg='两次密码不相同'
                    return false
                }
            },
            // 确认修改
            update(){
                const {emailMsg,checkpwd,checkRepwd} = this
                if(emailMsg==''&&checkpwd()&checkRepwd()){
                    const url=`api/users/resetpwd/email?email=${this.email}`
                    const params={npwd:this.pwd}
                    this.axios.put(url,params).then(res=>{
                        // 修改成功
                        if(res.data.code==200){
                            this.$toast({
                                message:'密码设置成功！',
                                position:'bottom'
                            })
                        }
                        this.$router.push('/login')
                    })
                }
            },
            clearPwdError() {
                this.pwdMsg = ""
            },
            clearRepwdError() {
                this.repwdMsg = ""
            },
            clearEmailError() {
                this.emailMsg = ""
            },
            // 密码强中弱
            showEfficiency() {
                this.$refs.kuang.children.forEach = Array.prototype.forEach;
                let reg1 = /\d/;
                let reg2 = /[a-zA-Z]/;
                let reg3 =
                    /[\s\`\~\!\#\$\%\^\&\*\(\)\_\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/;
                let count = 0;
                for (let i = 0; i < this.pwd.length; i++) {
                    if (reg1.test(this.pwd) && reg2.test(this.pwd) && reg3.test(this.pwd)) {
                    count = 3;
                    } else if (
                    (reg1.test(this.pwd) &&
                        !reg2.test(this.pwd) &&
                        !reg3.test(this.pwd)) ||
                    (!reg1.test(this.pwd) &&
                        reg2.test(this.pwd) &&
                        !reg3.test(this.pwd)) ||
                    (!reg1.test(this.pwd) && !reg2.test(this.pwd) && reg3.test(this.pwd))
                    ) {
                    count = 1;
                    } else if (
                    (reg1.test(this.pwd) &&
                        reg2.test(this.pwd) &&
                        !reg3.test(this.pwd)) ||
                    (reg1.test(this.pwd) &&
                        !reg2.test(this.pwd) &&
                        reg3.test(this.pwd)) ||
                    (!reg1.test(this.pwd) && reg2.test(this.pwd) && reg3.test(this.pwd))
                    ) {
                    count = 2;
                    }
                }
                if (count == 1) {
                    this.w_or_s1 = "弱";
                    this.w_or_s2 = "";
                    this.w_or_s3 = "";
                    this.$refs.kuang.children.forEach((item) => {
                    item.style.backgroundColor = "red";
                    });
                } else if (count == 2) {
                    this.w_or_s2 = "中";
                    this.w_or_s1 = "";
                    this.w_or_s3 = "";
                    this.$refs.kuang.children.forEach((item) => {
                    item.style.backgroundColor = "#e7e414";
                    });
                } else if (count == 3) {
                    this.w_or_s3 = "强";
                    this.w_or_s1 = "";
                    this.w_or_s2 = "";
                    this.$refs.kuang.children.forEach((item) => {
                    item.style.backgroundColor = "green";
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.input-group {
    margin-bottom: 10px;
    .van-field {
        border-bottom: 1px solid #ebedf0;
        padding: 10px;
    }
    .pwd {
      padding: 10px 0 0 15px;
      display: none;
      // 有数据的时候在显示
      &.inp {
        display: flex;
      }
        div {
            box-sizing: border-box;
            width: 100px;
            padding: 5px;
            margin-right: 5px;
            text-align: center;
            font-size: 0.9em;
            color: white;
            height: 20px;
        }
    }
}
.btns {
    margin-right: 2vw;
    div {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 0 10px 0;
        font-size: .8em;
        border-radius: 6px;
        background-color: #9a4145;
        color: #Fff;
        padding: 10px;
        text-align: center;
    }
}
</style>